{% extends "erp/base.html" %}

{% block title %}产品入库{% endblock %}

{% block scripts %}
<script>
    // 将SKU数据存储为JavaScript变量
    const skuChoices = {{ sku_choices_json|safe }};
</script>
<script src="/static/js/product_inbound.js"></script>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <h2>产品入库</h2>
        
        <form id="productInboundForm" method="post">
            {% csrf_token %}
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>SKU</th>
                            <th>箱规</th>
                            <th>箱数</th>
                            <th>日期</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="inboundItems">
                        {% for form in forms %}
                        <tr class="form-row">
                            <td>
                                <select id="sku-data" name="sku" class="form-control sku-select" required>
                                    <option value="">选择SKU</option>
                                    {% for sku in sku_choices %}
                                    <option value="{{ sku }}">{{ sku }}</option>
                                    {% endfor %}
                                </select>
                            </td>
                            <td><input type="text" name="box_spec" class="form-control" required></td>
                            <td><input type="number" name="box_count" class="form-control" min="1" required></td>
                            <td><input type="date" name="date" class="form-control" value="{{ today }}"></td>
                            <td><textarea name="remark" class="form-control"></textarea></td>
                            <td><button type="button" class="btn btn-danger btn-sm remove-row">删除</button></td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <div class="d-flex justify-content-between">
                <button type="button" id="addRow" class="btn btn-secondary">新增一行</button>
                <button type="submit" class="btn btn-primary btn-submit">提交入库</button>
            </div>
        </form>
        
        <div id="successMessage" class="alert alert-success mt-3" style="display: none;">
            入库成功！
        </div>
    </div>
</div>
{% endblock %}